import React, { useEffect } from 'react'
import { ScrollView, View, Image } from '@tarojs/components'
import { useDidShow } from '@tarojs/taro'
import { SpTab, SpNote, SpToast, SpNavBar, } from '@/components'
import { SelectInput, CommonButton } from '@/components/sp-page-components'
import ActionModal from '@/components/sp-page-components/page-action-buttons/ActionModal'
import { getThemeStyle, pickBy, showToast, hasNavbar } from '@/utils'
import { useSelector } from 'react-redux'
import { useImmer } from 'use-immer'
import { usePage, useDepChange } from '@/hooks'
import FilterBlock from '../../../../order/list/comps/filterblock'
import doc from '@/doc'
import api from '@/api'
import { CheckList, InfiniteScroll, Modal, Radio, Space, Form, Stepper, Dialog } from 'antd-mobile'
import './shopCheck.scss'
import index from '@/components/sp-radio'
//页面类型
const PAGE_TYPE = 'shopList'



const ACTION_LIST = [
    { label: '状态', plain: true, type: 'delete' },
    { label: '编辑', plain: true, type: 'edit' }
]

const SHELVES = [{ label: '上架', type: 'onsale' }]
const DIFF_SHELVES = [{ label: '下架', type: 'instock' }]

const AUDIT_PEROCESS = [{ label: '审核中', type: 'processing' }]
const AUDIT_REJECTED = [{ label: '审核驳回', type: 'rejected' }]

const initState = {
    //搜索框选择的参数  类型为对象
    inputParams: null,
    //搜索框输入的值
    inputValue: undefined,
    list: [],
    //tab切换
    activeIndex: 0,
    //筛选参数
    filterParams: null,
    visible: false,
    is_valid: '',
    is_ziti: '',
    is_delivery: ''
}

const ShopCheck = (props) => {
    const [state, setState] = useImmer(initState)
    const {
        label,
        required = false,
        mode = 'input',
        placeholder,
        onClick = () => { },
        value: valueProp,
        onChange: onChangeProp = () => { },
        className,
        type = 'text',
        selected,
        shoptype,
        distributor_id,
    } = props
    const { inputParams, inputValue, list, activeIndex, filterParams } = state

    const handleParamChange = (inputParams) => {
        setState((_val) => {
            _val.inputParams = { ...inputParams }
        })
    }


    const fetch = async ({ pageIndex, pageSize }) => {
        let synthetic = {}
        if (inputParams && inputValue) {
            synthetic[inputParams.value] = inputValue
        }
        let audit_status = filterParams?.approve_status ? 'approved' : undefined
        const params = {
            page: pageIndex,
            pageSize,
            ...synthetic,
            ...(filterParams || {}),
        }
        if (shoptype == 2) {
            params.distributor_id = distributor_id
            const { list, total_count } = await api.shop.getMerchantAftersales(params)
            await setState((_val) => {
                _val.list = list
            })
            console.log('-------', pageIndex, list)
            return { total: total_count }
        } else {
            const { list, total_count } = await api.shop.getShopList(params)
            await setState((_val) => {
                _val.list = params.page > 1 ? [..._val.list, ...list] : list
            })
            console.log('-------', pageIndex, list)
            return { total: total_count }
        }

        // this.setState({
        //   orderList: params.page_no > 1 ? [...this.state.orderList, ...list] : list
        // })

        
    }

    const { page, getTotal, nextPage, resetPage, nextPageForce } = usePage({
        fetch
    })

    useDidShow(async () => {
        await setState((draft) => {
            draft.list = []
        })
        resetPage()
    })

    const handleValueChange = (inputValue) => {
        setState((_val) => {
            _val.inputValue = inputValue
        })
    }

    const handleChangeTab = async (active) => {
        await setState((_val) => {
            _val.activeIndex = active
        })
    }

    const handleSearchFilter = async () => {
        await setState((draft) => {
            draft.list = []
        })
        resetPage()
    }

    const handleSubmitParams = async (params) => {
        console.log('==params==', params)
        await setState((_val) => {
            _val.filterParams = params
        })
    }

    useDepChange(() => {
        if (filterParams) {
            handleSearchFilter()
        }
    }, [filterParams])

    useEffect(() => {
        setState((draft) => {
            draft.list = []
        })
        resetPage()
        console.log('useDidShow.....')
    }, [valueProp])
    
    return (
        <View>
            <View className='page-adress-shop-list' style={getThemeStyle()}>

                <View className='page-adress-shop-list-input'>
                    <SelectInput
                        inputParam={inputParams}
                        inputValue={inputValue}
                        pageType={PAGE_TYPE}
                        paramChange={handleParamChange}
                        valueChange={handleValueChange}
                        onInputConfirm={handleSearchFilter}
                    />
                </View>

                {/* <FilterBlock title='店铺筛选' pageType={PAGE_TYPE} onSubmitParams={handleSubmitParams} /> */}
                <CheckList
                    className='comp-item'
                    multiple
                    defaultValue={selected}
                    onChange={
                        async(val) => {
                            console.log(val)
                            let arr = list.filter((item) => {
                                // return item.distributor_id == val[0]
                                return val.includes(item.distributor_id)
                            })
                            // console.log(arr)
                            onChangeProp(arr)

                        }}
                        
                >
                    {list.length > 0 ? (
                        list.map((shopInfo) => {
                            return (
                                <CheckList.Item key={shopInfo.distributor_id +index} value={shopInfo.distributor_id}>
                                    <View className='comp-item-good-header'>

                                        <View className='comp-item-good-header-pic'>

                                            <Image className='img' src={shopInfo.logo} />
                                        </View>
                                        <View className='comp-item-good'>
                                            <View className='comp-item-good-center'>
                                                <View className='good-name'>{shopInfo.store_name || shopInfo.name}</View>
                                                <View className='good-no'>{shopInfo.store_address || shopInfo.address}</View>
                                            </View>
                                            <View className='comp-item-good-right'>
                                                <View className='sale_price'>
                                                    <View className='sale_price_label'>姓名:{shopInfo.contact}</View>
                                                    <View className='sale_price_number'>是否自提:{shopInfo.is_ziti ? '是' : '否'}</View>
                                                </View>
                                                <View className='sale_price'>
                                                    <View className='sale_price_label'>电话:{shopInfo.phone || shopInfo.mobile}</View>
                                                    <View className='sale_price_number'>快递配送:{shopInfo.is_delivery ? '是' : '否'}</View>
                                                </View>
                                            </View>
                                        </View>
                                    </View>
                                </CheckList.Item>
                            )
                        })

                    ) : (
                        <SpNote className="note-list" img='empty.png'>暂无数据～</SpNote>
                    )}
                    {!!list.length && <InfiniteScroll loadMore={nextPageForce} hasMore={page.hasMore} />}

                </CheckList>
            </View>
        </View>
    )
}

export default ShopCheck
